import { useState } from 'react'

export const day01_08 = () => {
    // 简单数据类型
    let [count, setCount] = useState(0)
    const handleBtn = () => {
        // count++ // 直接修改无法刷新视图
        // console.log('count', count)
        setCount(++count)
    }
    // 复杂数据类型(对象)
    let [form, setForm] = useState({
        name: '张三',
    })
    const handleChangeName = () => {
        // form.name = '李四' // 直接修改数据无法刷新视图
        // console.log('name', form.name)
        // setForm(Object.assign(form, { name: '李四' }))   // 不可以
        setForm({
            ...form,
            name: '李四',
        })
    }

    // 复杂数据类型(数组)
    let [arr, setArr] = useState([1, 2, 3])
    const handleChangeArr = () => {
        // const res = arr.map(item => (item += 1))
        arr[0] = 4
        console.log(arr)

        setArr(arr)
    }

    return (
        <div>
            <h3>08_useState修改状态规则</h3>
            <div>
                <button onClick={handleBtn}>count: {count}</button>
            </div>

            <div>name : {form.name}</div>
            <div>
                <button onClick={handleChangeName}>change Name</button>
            </div>

            <div>arr : {arr}</div>
            <div>
                <button onClick={handleChangeArr}>change arr</button>
            </div>
        </div>
    )
}
